<template>
    <a-drawer :title="title" width="60%" :visible="visible" @close="() => {
            this.visible = false
        }
        ">
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="5">
                    <a-col :span="7">
                        <a-form-item>
                            <a-input @keydown="inputKeyDown" v-model="queryParam.Conditions[0].Keyword"
                                placeholder="客户名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="5">
                        <a-button type="primary"
                            @click="() => { this.pagination.current = 1, this.getDataList() }">查询</a-button>
                        <a-button style="margin-left: 5px" @click="Repossess">重置</a-button>
                    </a-col>
                    <a-col :span="12" style="text-align: right">
                        <a-radio-group v-model="queryParam.Conditions[1].keyword" :default-value="null" button-style="solid"
                            @change="cCusTypeChange">
                            <a-radio-button :value="null"> 全部</a-radio-button>
                            <a-radio-button :value="1"> 正式</a-radio-button>
                            <a-radio-button :value="0"> 潜在</a-radio-button>
                            <a-radio-button :value="2"> 休眠</a-radio-button>
                            <a-radio-button :value="3"> 待转正</a-radio-button>
                        </a-radio-group>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table ref="table" :scroll="{ y: 680 }" :columns="columns" :rowKey="(row, index) => row.Id" :dataSource="data"
            :pagination="pagination" :loading="loading" :bordered="true" @change="handleTableChange" size="small">
            <template slot="cCusType" slot-scope="text, record">
                <a-tag v-if="record.cCusType === 0" color="blue">潜在</a-tag>
                <a-tag v-else-if="record.cCusType === 1" color="green">正式</a-tag>
                <a-tag v-else-if="record.cCusType === 2" color="red">休眠</a-tag>
                <a-tag v-else-if="record.cCusType === 3" color="orange">待转正</a-tag>
            </template>
            <template slot="GroupStatus" slot-scope="text, record">
                <a-tag v-if="record.GroupStatus === 0" color="red">待分组</a-tag>
                <a-tag v-if="record.GroupStatus === 1" color="orange">申请中</a-tag>
                <a-tag v-if="record.GroupStatus === 2" color="green">已分组</a-tag>
            </template>
            <template slot="action" slot-scope="text, record">
                <a @click="Detail(record)">详情</a>
                <a-divider v-if="IsExistAddress == 2" type="vertical" />
                <a @click="Edit(record.Id)" v-if="IsExistAddress == 2">维护</a>
            </template>
        </a-table>
        <CusEditForm ref="details" :parentObj="this"></CusEditForm>
        <Detailsfrom ref="detailsfrom" :parentObj="this" @pageClose="pageClose"></Detailsfrom>
    </a-drawer>
</template>

<script>
import Detailsfrom from '@/views/CustomerManagement/Customer/Details.vue'
import CusEditForm from '@/views/CustomerManagement/Customer/EditForm.vue'

const columns = [
    { title: '客户编码', dataIndex: 'cCusCode', width: '12%', align: 'center' },
    { title: '客户名称', dataIndex: 'cCusName' },
    {
        title: '类型',
        dataIndex: 'cCusType',
        align: 'center',
        width: '10%',
        scopedSlots: { customRender: 'cCusType' }
    },
    {
        title: '分组',
        dataIndex: 'GroupName',
        align: 'center',
        customRender: (value, row) => {
            if (row.GroupName != null && row.GroupName.length > 0) {
                return row.GroupName
            } else {
                return '无'
            }
        },
        width: '12%'
    },
    { title: '负责人', dataIndex: 'PrincipalName', width: '10%', align: 'center' },
    {
        title: '状态',
        dataIndex: 'GroupStatus',
        align: 'center',
        scopedSlots: { customRender: 'GroupStatus' },
        width: '10%'
    },
    { title: '操作', dataIndex: 'action', align: 'left', width: '10%', scopedSlots: { customRender: 'action' } }
]
export default {
    components: {
        CusEditForm,
        Detailsfrom
    },
    props: {
        parentObj: Object
    },
    data() {
        return {
            visible: false,
            title: '',
            data: [],
            loading: false,
            columns,
            AreaId: '',
            AreaType: '',
            IsExistAddress: null,
            Level: '',
            filters: {}, // 分页过滤
            sorter: { field: 'Id', order: 'desc' }, // 排序条件
            pagination: {
                // 左侧分页对象信息
                current: 1,
                pageSize: 25,
                showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
                pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
                showSizeChanger: true
            },
            queryParam: {
                // 查询条件对象集合
                Level: this.Level,
                IsExistAddress: this.IsExistAddress,
                Conditions: [
                    { Condition: 'cCusName', Keyword: null },
                    { condition: 'cCusType', keyword: null },
                    { Condition: this.AreaType ? (this.AreaType === '省份' ? 'cProvince' : 'cCity') : null, Keyword: this.AreaId }
                ]
            }
        }
    },
    methods: {
        pageClose() {
            this.$emit('MapEdit', null)
        },
        init() {
            this.data = []
            this.visible = true
            this.pagination = {
                current: 1,
                pageSize: 25,
                showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
                pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
                showSizeChanger: true
            }
        },
        Edit(id) {
            this.$refs.detailsfrom.openForm(id, '编辑信息', null, 'Map')
        },
        openForm(AreaId, title, AreaType, IsExistAddress, Level) {
            // console.log('AreaId:' + AreaId)
            // console.log('title:' + title)
            // console.log('AreaType:' + AreaType)
            // console.log('IsExistAddress:' + IsExistAddress)
            // console.log('Level:' + Level)
            this.init()
            this.AreaId = AreaId
            this.AreaType = AreaType
            this.IsExistAddress = IsExistAddress
            this.Level = Level
            this.title = title
            this.Repossess()
        },
        getDataList() {
            this.$http
                .post('/CustomerManagement/CustomerInfo/GetDataListAsyncForMapCustomerInfo', {
                    PageIndex: this.pagination.current,
                    PageRows: this.pagination.pageSize,
                    SortField: this.sorter.field || 'Id',
                    SortType: this.sorter.order,
                    Search: this.queryParam,
                    ...this.filters
                })
                .then(res => {
                    if (res.Success) {
                        this.data = res.Data
                        if (this.data) {
                            const pagination = { ...this.pagination }
                            pagination.total = res.Total
                            this.pagination = pagination
                        }
                    } else {
                        this.$message.error(res.Msg)
                    }
                })
        },
        // 条件框输入 回车查询
        inputKeyDown(e) {
            if (e.keyCode === 13) {
                this.getDataList()
            }
        },
        // 表格分页操作
        handleTableChange(pagination, filters, sorter) {
            this.pagination = { ...pagination }
            this.filters = { ...filters }
            this.getDataList()
        },
        // 重置按钮
        Repossess() {
            this.queryParam = {
                // 查询条件对象集合
                Level: this.Level,
                IsExistAddress: this.IsExistAddress,
                Conditions: [
                    { Condition: 'cCusName', Keyword: null },
                    { condition: 'cCusType', keyword: null },
                    { Condition: this.AreaType === '省份' ? 'cProvince' : 'cCity', Keyword: this.AreaId }
                ]
            }
            this.getDataList()
        },
        // 筛选客户类型
        cCusTypeChange() {
            this.getDataList()
        },
        Detail(record) {
            // cCusName Id   必要属性
            this.$refs.details.openForm(record, '详情', true)
        }
    }
}
</script>

<style></style>